<script setup>
import {ref} from 'vue'

import {useRouter} from 'vue-router'
const router = useRouter()
import {login} from '@/api/user.js'
//导入静态图片
import banner1 from "../../assets/images/08.jpg"
import banner2 from "../../assets/images/01.jpg"
import banner3 from "../../assets/images/05.jpg"
import banner4 from "../../assets/images/00.jpg"

import {User} from '@element-plus/icons-vue'
import {Lock} from '@element-plus/icons-vue'
import {CircleCheck} from '@element-plus/icons-vue'

components:{
  User,Lock,CircleCheck
}
//图片数组
const imgList=ref([
  {
    id:1,
    imgPath:banner1
  },
  {
    id:2,
    imgPath:banner2
  },
  {
    id:3,
    imgPath:banner3
  },
  {
    id:4,
    imgPath:banner4
  }
])

//定义表单提交数据
const formData=ref({
  phone:'',
  password:'',
  code:'',
  captcha:'http://localhost:8080/api/captcha'
})
const captcha=()=>{
  formData.value.captcha="http://localhost:8080/api/captcha?t="+Math.random();
}
//获取表单实例
const formRef=ref(null)

//定义数据校验规则
const rules={
  phone:[
    {
      required: true,
      message:'请输入账号',
      trigger:'blur'//失去焦点时触发
    }
  ],
  password:[{
    required: true,
    message:'请输入密码',
    trigger:'blur'//失去焦点时触发
  },{
    min:6,
    max:15,
    message: '密码长度最短6位,最长15位'
  }],
 code:[
   {
     required: true,
     message:'请输入验证码',
     trigger:'blur'//失去焦点时触发
   }
 ],
}

//登录操作
const userLogin=()=>{
  //验证表单
  formRef.value.validate((valid)=>{
  if(valid){
    login(formData.value).then(res=>{
      if(res.code==200){
        //将用户信息保存到本地
        localStorage.setItem("user",JSON.stringify(res.data))
        router.push("/home")
      }else{
        alert("电话或者密码错误")
      }
    }).catch((error)=>{
      alert(error.message);
    })
  } else{
    return false
    }
  })
}
</script>

<template>
  <div class="container">
    <div class="header">
      <span class="title">成都理工大学</span>
      <span class="sub-title">新生报到服务平台</span>
    </div>
    <div class="main">
      <el-carousel trigger="click" height="710px">
        <el-carousel-item v-for="item in imgList" :key="item">
          <img :src="item.imgPath" class="img-lun">
        </el-carousel-item>
      </el-carousel>
<!--      表单-->
      <el-card class="box-card">
        <p>用户登录</p>
        <el-form  ref="formRef" :model="formData" :rules="rules">
          <el-form-item prop="username">
            <el-input placeholder="请输入工号/学号" :prefix-icon="User" v-model="formData.phone"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input placeholder="请输入密码" :prefix-icon="Lock" v-model="formData.password" show-password></el-input>
          </el-form-item>
          <el-form-item  prop="code">
            <el-input  class="code-input" placeholder="请输入验证码":prefix-icon="CircleCheck" v-model="formData.code"></el-input>
            <img class="img-code" :src="formData.captcha" @click="captcha" title="点击刷新">
          </el-form-item>
        </el-form>
        <el-checkbox style="margin-top:1px"  v-model="checked3" label="记住密码" />
        <el-button type="primary"  @click="userLogin"   style="width: 100%;outline: none;margin-top: 10px">登&nbsp;录</el-button>
        <span class="forget-password">忘记密码？</span>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.container{
  width: 100vw;
  height: 100vh;
  text-align: left;
}
.header {
  width: 100%;
  height: 8%;
  background-color: #ac1d12;
}
.title{
  font-size: 28px;
  color: white;
  font-weight: bold;
  margin-left: 20px;
  line-height: 8vh;
  position: relative;
}
.sub-title{
  position: absolute;
  color: white;
  font-size:22px;
  font-weight: bold;
  top:15px;
  left: 200px;
}
.main {
  position: relative;
  width: 100%;
  height: 92%; /* 100% - 8% header */
}
:deep(el-carousel__arrow){

  outline: none;
}
.img-lun{
  width: 100%;
}
.box-card{
  position: absolute;
  top:10%;
  left: 60%;
  width: 360px;
  height: 380px;
}
.box-card p{
  font-size: 18px;
  text-align: center;
}


.code-input{
  width: 200px;
}
.img-code{
  width: 100px;
  margin-left: 20px;
  cursor: pointer;
}
.forget-password{
  text-align: left;
  color: #409EFF;
  font-size: 14px;
  cursor: pointer;
}

</style>